<div>

	<div id="users" class="clear">
		<table class="table table-bordered">

			<tbody>
			<tr style="background-color: #f5f5f5">
				<th colspan="7">User list</th>
			</tr>
			<tr>
				<td>Index</td>
				<td>Login name</td>
				<td>name</td>
				<td>Remark</td>
				<td>Options</td>
			</tr>
			<tr ng-repeat="user in users" class="hover-pointer">
				<td>{{$index + 1}}</td>
				<td>{{user.loginName}}</td>
				<td>{{user.name}}</td>
				<td>{{user.remark}}</td>
				<td><a class="pointer" ng-click="editUser(user)">Update</a> | <a class="pointer"
																				 ng-click="deleteUser(user)">Remove</a>
				</td>
			</tr>
			</tbody>
		</table>
	</div>

	<a class="btn btn-primary" ng-click="addUser(user)">Add user</a>

	<div class="btn-group pull-right" role="group">
		<button type="button" ng-click="previousPage()" class="btn btn-default"
				ng-disabled="!page.hasPrevious">Previous
		</button>
		<button type="button" ng-click="nextPage()" class="btn btn-default"
				ng-disabled="!page.hasNext">Next
		</button>
	</div>

	<div class="pull-right page-info">
		<span>Current at page <b>{{page.number + 1}}</b>，
		</span> <span>Total <b>{{page.totalPages}}</b> pages
		</span>
	</div>

</div>

<div class="modal fade" id="add-user" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">Add new user</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">

					<div class="form-group">
						<label class="col-md-3">login name：</label>
						<div class="col-md-5">
							<input type="text" ng-model="add.loginName" class="form-control"
								   required/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-3">password：</label>
						<div class="col-md-5">
							<input type="text" ng-model="add.password" class="form-control"
								   required/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-3">name：</label>
						<div class="col-md-5">
							<input type="text" ng-model="add.name" class="form-control" required/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-3"> remark: </label>
						<div class="col-md-5">
							<input type="text" ng-model="add.remark" class="form-control" required/>
						</div>
					</div>

				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" ng-click="confirmAdd()">OK</button>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="edit-user" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">Edit user {{edit.name}}</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">

					<div class="form-group">
						<label class="col-md-3">Login name：</label>
						<div class="col-md-5">
							<input type="text" ng-model="edit.loginName" class="form-control"
								   required readonly/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-3">Name：</label>
						<div class="col-md-5">
							<input type="text" ng-model="edit.name" class="form-control" required/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-3">Remark: </label>
						<div class="col-md-5">
							<input type="text" ng-model="edit.remark" class="form-control"
								   required/>
						</div>
					</div>

				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" ng-click="confirmEdit()">OK</button>
			</div>
		</div>
	</div>
</div>